<template>
<!-- 对于表单元素来说，要实现提交数据的功能，有两个地方可以添加事件：
-  直接对 提交 按钮 添加
-  给form添加submit -->
  <form>
    <button @click.prevent="$router.push('/hero')" class="btn">返回</button>
    <legend>添加英雄</legend>
    <div class="form-group">
      <label>英雄名称</label>
      <input v-model.trim="hero.heroName" type="text" class="form-control" />
    </div>
    <div class="form-group">
      <label>英雄性别</label>
      <div>
        <input type="radio" value="男" v-model="hero.gender"> 男
        <input type="radio" value="女" v-model="hero.gender"> 女
      </div>
    </div>
    <!-- 对于form中的button，它有提交表单的默认动作，这里要阻止 -->
    <button @click.prevent="hAdd" class="btn btn-primary">提交</button>
  </form>
</template>

<script>
export default {
    name: 'HeroAdd',
    data () {
        return {
            // 定义的数据项是一个对象
            hero: {
                heroName: '',
                gender: '男'
            }
        }
    },
    methods: {
        hAdd () {
            // 1. 获取用户的输入
            // 2. 判断是否为空
            console.log(this.hero)
            if(this.hero.heroName == '') {
                return 
            }
            // 3. ajax提交
            this.$http({
                method: 'POST',
                url: '/heroes',
                // 根据RESTFul接口要求传入参数
                data: {
                    heroName : this.hero.heroName,
                    gender: this.hero.gender,
                    cTime: new Date()
                }
            }).then(res => {
                console.log(res)
                // alert('添加成功')
                // 实现：添加成功之后，自动跳回到英雄列表页。
                // 编程式导航 ： 通过代码的方式来进行页面的跳转
                this.$router.push('/hero') 

            }).catch(err => {
                console.log(err)
                alert('添加失败')

            })
        }
    }
}
</script>

<style>

</style>